<template>
	<view>
		<view class="nav_box flex-box">
			<view class="flex-grow-1" :class="{'active': tabIdx==0}" @click="tabClick(0)">新增收益</view>
			<view class="flex-grow-1" :class="{'active': tabIdx==1}" @click="tabClick(1)">新增房源</view>
			<view class="flex-grow-1" :class="{'active': tabIdx==2}" @click="tabClick(2)">新增客户</view>
			<view class="flex-grow-1" :class="{'active': tabIdx==3}" @click="tabClick(3)">新增带看</view>
		</view>

		<view class="container plr30 pb30">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" top="100rpx" :up="upOption">
				<!-- 新增收益 -->
				<template v-if="tabIdx == 0">
					<view class="ptb40 m-hairline--bottom" v-for="(item,index) in dataLists">
						<view class="flex-box mb30">
							<view class="fs30 col89 mr10">订单号</view>
							<view class="fs30 col10 flex1">{{item.extra.order_no}} 中介费</view>
							<view class="fs24 col89">{{item.createtime_text}}</view>
						</view>
						<view class="fs30 col10 mb30">{{item.extra.name}}</view>
						<view class="flex-box flex-between">
							<view class="flex-box flex-align-baseline">
								<view class="fs22 col89">房东中介费:</view>
								<view class="fs24 col-price">¥</view>
								<view class="fs34 col-price">{{item.extra.lessor_medium_money}}</view>
							</view>
							<view class="flex-box flex-align-baseline">
								<view class="fs22 col89">租客中介费:</view>
								<view class="fs24 col-price">¥</view>
								<view class="fs34 col-price">{{item.extra.renter_medium_money}}</view>
							</view>
							<view class="flex-box flex-align-baseline">
								<view class="fs22 col89">实际到账:</view>
								<view class="fs24 col-price">¥</view>
								<view class="fs34 col-price">{{item.money}}</view>
							</view>
						</view>
					</view>
				</template>

				<!-- 新增房源 -->
				<template v-if="tabIdx == 1">
					<view class="ptb40 m-hairline--bottom" v-for="(item,index) in dataLists">
						<view class="fs30 col10 mb30">{{item.name}}</view>
						<view class="fs24 col89">{{item.createtime_date}}</view>
					</view>
				</template>

				<!-- 新增客户 -->
				<template v-if="tabIdx == 2">
					<view class="flex-box ptb40 m-hairline--bottom" v-for="(item,index) in dataLists">
						<image class="head" :src="item.user.avatar" mode="aspectFill"></image>
						<view class="flex1">
							<view class="fs30 col10 mb15">{{item.user.nickname}}</view>
							<view class="fs24 col89">{{item.distributetime_text}}</view>
						</view>
					</view>
				</template>

				<!-- 新增带看 -->
				<template v-if="tabIdx == 3">
					<view class="flex-box ptb40 m-hairline--bottom" v-for="(item,index) in dataLists">
						<image class="head" :src="item.user.avatar" mode="aspectFill"></image>
						<view class="flex1">
							<view class="flex-box mb15">
								<view class="fs30 col10 flex1">{{item.user.nickname}}</view>
								<view class="fs24 col89">{{item.view_date}}</view>
							</view>
							<!-- <view class="fs24 col89">带看金牛苑、曹阳小区</view> -->
						</view>
					</view>
				</template>
				<mescroll-empty v-if="dataLists.length<=0"></mescroll-empty>
			</mescroll-body>
		</view>

	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	const core = require('@/xilu/core.js');
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				date: '',
				tabIdx: 0,
				downOption:{
					auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption:{
					auto:true, // 不自动加载
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: '/static/images/none-data.png',
						tip: '暂无内容' 
					}
				},
				dataLists:[],
			};
		},
		onLoad(options){
			this.date = options.date || '';
		},
		methods: {
			tabClick(i) {
				this.tabIdx = i;
				this.mescroll.resetUpScroll();
			},
			downCallback(){
				this.mescroll.resetUpScroll();
			},
			upCallback(page){
				let that = this;
				let tabIdx = that.tabIdx;
				let postData = {
					page: page.num, // 页码, 默认从1开始
					pagesize: page.size, // 每页数据条数
					date: that.date
				};
				//联网加载数据
				let url = "api/xiluhouse.money/money_log_list";
				if(tabIdx == 1){
					url = "api/xiluhouse.broker/rental_lists"
				}else if(tabIdx == 2){
					url = "api/xiluhouse.appoint/my_user_list";
				}else if(tabIdx == 3){
					url = "api/xiluhouse.appoint/my_user_list";
					postData['house_state'] = 2;
				}else{
					postData['type'] = 3;
				}
				core.get({url:url,data:postData,success:(ret)=>{
					 if(page.num == 1) that.dataLists = []; //如果是第一页需手动制空列表
					 that.dataLists = that.dataLists.concat(ret.data.data); //追加新数据
					 //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					 that.mescroll.endSuccess(ret.data.data.length);
				},loading:false});
			},
		}
	}
</script>

<style lang="less" scoped>
	.nav_box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 10;
		font-size: 30rpx;
		color: #898989;
		text-align: center;
		line-height: 100rpx;

		view {
			position: relative;

			text {
				position: absolute;
				right: 2rpx;
				top: 18rpx;
				display: block;
				width: 24rpx;
				height: 24rpx;
				background: #FF3B45;
				border-radius: 50%;
				font-size: 18rpx;
				color: #FFFFFF;
				line-height: 24rpx;
				text-align: center;
			}
		}

		view.active {
			font-size: 36rpx;
			color: #101010;
			font-weight: bold;
			position: relative;
		}

		view.active::after {
			content: "";
			display: block;
			width: 20rpx;
			height: 4rpx;
			background: var(--normal);
			border-radius: 3rpx;
			position: absolute;
			bottom: 10rpx;
			left: 50%;
			transform: translateX(-50%);
		}

	}
	.head{
		margin: 0 20rpx 0 0;
		display: block;
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}
</style>
